<template>
  <div class="aa-container">
    <img class="aa-text" src="../../assets/images/AIAnalysis/aa-text.png" alt="">
    <div class="aa-content">
      <el-form 
        ref="ruleFormRef"
        :model="ruleForm" 
        :rules="rules" 
        label-width="auto"
        class="form" 
        hide-required-asterisk
        status-icon>
        <el-form-item label="拟投资项目名称" prop="projectName">
          <el-input v-model="ruleForm.projectName"  placeholder="请输入招商项目内容"/>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-input v-model="ruleForm.industry"  placeholder="请输入招商项目所属行业"/>
        </el-form-item>
        <el-form-item label="投资企业名称" prop="CompanyName">
          <el-input v-model="ruleForm.CompanyName" placeholder="请输入项目的投资企业名称"/>
        </el-form-item>
        <el-form-item label="项目主要产品" prop="product">
          <el-input class="textarea" v-model="ruleForm.product" type="textarea" placeholder="请输入项目的主要产品名称，多个产品的请用”,”隔开"/>
        </el-form-item>
        <el-form-item class="form-btn">
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button class="sure-btn" type="primary" @click="submitForm(ruleFormRef)">AI智能分析</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()

const ruleForm = reactive({
  projectName:"",
  industry:"",
  CompanyName:"",
  product:""
})

const rules = reactive({
  projectName:[
    { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
  ],
  industry:[
    { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
  ],
  CompanyName:[
    { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
  ],
  product:[
    { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
  ]
})

const submitForm = () =>{
  router.push("/ReportType")
}

</script>
<style lang="less" scoped>

:deep(.is-required .el-form-item__label::after){
  content: "*";
  color: #ff0000;
  margin-left: 4px;
}

:deep(.el-form-item){
  margin-top: 30px;
}

.aa-container {
  height:calc(100vh - 70px);
  width: 100%;
  background: url("../../assets/images/AIAnalysis/aa-bg.png") no-repeat;
  background-size: cover;  
  text-align: center;

  .aa-text{
    width: 400px;
    margin-top: 80px;
  }
  
  .aa-content{
    margin: 0 auto;
    width: 60%;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    padding: 40px 80px;
    box-sizing: border-box;
    margin-top: 50px;
    .textarea{
      :deep(.el-textarea__inner){
        height: 100px;
      }
    }
    .form-btn{
      :deep(.el-form-item__content){
        justify-content: center;
        .sure-btn{
          background: #006EFF;
          margin-left: 80px;
        }
      }
    }
  }
}
</style>
